<template>
  <div>
    <el-dialog
      :title="option.title"
      :visible.sync="isShow"
      @close="closeUser"
      width="90%"
      @open="openCreate"
      :close-on-click-modal="false"
      center
    >
      <div v-loading="loading">
        <div class="content">
          <el-card >
            <el-form
              size="mini"
              ref="form"
              :model="form"
              inline
              label-width="150px"
              label-position="left"
            >
              <el-row :gutter="10">
                
                <el-col :span="11">
                  <Spectaculars :key="1" :list="list1" :options="options" class="kanban todo" header-text="效能力指标"></Spectaculars>
                  <Spectaculars :key="2" :list="list2" :options="options" class="kanban working" header-text="体验指标"></Spectaculars>
                  <Spectaculars :key="3" :list="list3" :options="options" class="kanban done" header-text="员工行为"></Spectaculars>
                  <Spectaculars :key="4" :list="list4" :options="options" class="kanban done" header-text="服销指标"></Spectaculars>
                </el-col>
                <el-col :span="2" align="center" >
                  <div><img src="../../../../../static/images/image/removeLeft.png"/></div>
                  <div>请拖动指标</div>
                  <div><img src="../../../../../static/images/image/removeRight.png"/></div>
                </el-col>
                <el-col :span="11">
                  <Spectaculars :key="1" :list="list5" :options="options" class="kanban todo" header-text="已选择指标"></Spectaculars>

                  <ve-radar :data="radarData" :settings="radarSettings" :extend="radarExtend" :legend-visible="false" ></ve-radar>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" @click="addType" >关闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request1 from "@/common/utils/requestTest";
import toolBox from "@/common/utils/toolBox";
import getGlobalParams from "@/common/utils/getGlobalParams";
import privateTransfer from "@/components/privateTransfer/";
import Spectaculars from '@/components/Spectaculars'
import veRadar from "v-charts/lib/radar";

export default {
  name: '',
  components: {
    Spectaculars
  },
  data() {
    return {
      loading: false,
      radarData:{
        columns:['情况','1、人均产能','2、AHT','3、满意度','4、遵时率','5、NPS推荐率','6、差错率'],
        rows:[
          {'情况':'昨日','1、人均产能':50,'2、AHT':60,'3、满意度':90,'4、遵时率':90,'5、NPS推荐率':60,'6、差错率':80},
          {'情况':'目标值','1、人均产能':11,'2、AHT':40,'3、满意度':70,'4、遵时率':60,'5、NPS推荐率':50,'6、差错率':90},
        ],
      },
      radarExtend:{
        series: {
        },
        radar:{
          shape: "polygon"
        },
        polar:[
          {
            indicator:[
              {text:'1、人均产能',max:100},
              {text:'2、AHT',max:100},
              {text:'3、满意度',max:100},
              {text:'4、遵时率',max:100},
              {text:'5、NPS推荐率',max:100},
              {text:'6、差错率',max:100},
            ],

          }
        ]
      },
      radarSettings: {
        areaStyle: ["#000"],
      },
      options: {
        group: 'mission'
      },
      list1: [
        { name: '示忙时长', id: 1 },
        { name: '整理时长', id: 2 },
        { name: '呼入量', id: 3 },
        { name: '呼出量', id: 4 },
        { name: '转接量', id: 5 },
        { name: '登录时长', id: 6 },
      ],
      list2: [
        { name: '质检得分', id: 7 },
        { name: '抱怨量', id: 8 },
        { name: '遵时度', id: 9 },
        { name: '准确度差错件', id: 10 }
      ],
      list3: [
        { name: '病假天数', id: 11 },
        { name: '事假天数', id: 12 },
        { name: '加班时长', id: 13 },
        { name: '缺勤工时', id: 14 },
      ],
      list4: [
        { name: '总进线量', id: 11 },
        { name: '开口率', id: 12 },
        { name: '注册率', id: 13 },
        { name: '发送短信量', id: 14 }
      ],

      list5: [
        { name: '人均产能', id: 15 },
        { name: 'AHT', id: 16 },
        { name: '满意度', id: 17 },
        { name: '遵时度', id: 18 },
        { name: 'NPS推荐率', id: 19 },
        { name: '差错率', id: 20 },
      ],
      form: {

      },
    };
  },
  props: {
    //父元素传递的数据
    option: Object
  },
  computed: {
    isShow: {
      //创建用户弹窗是否显示
      get: function() {
        return this.option.isShow;
      },
      set: function(newValue) {
        this.option.isShow = newValue;
      }
    }
  },
  created: function() {
  },
  watch:{
    selectData(data){
      this.selectRow=[];
      if(data.length>0){
        data.forEach((item,index)=>{
          this.selectRow.push(this.tableData.indexOf(item));
        });
      }
    }
  },
  methods: {
    clickRow(row){
      this.$refs.tableData.toggleRowSelection(row)
    },
    handleSelectionChange(data){
      this.selectData = data;
    },
    rowClass({row,rowIndex}){
      if(this.selectRow.includes(rowIndex)){
        return {"background-color":"#dff0d8"}
      }
    },
    closeUser() {
      //关闭弹窗清楚表单数据并清楚表单验证
      if (this.$refs["form"] != undefined) {
        this.$refs["form"].resetFields(); //清楚表单验证
        this.$refs["form"].clearValidate(); //清楚表单验证
      }
      this.$emit("refreshTable");
      this.detailon = true;
      this.showCommon = false;
    },
    addType() {
      //关闭弹窗事件，清楚表单验证
      this.option.isShow = false;
      this.$refs.form.clearValidate();
    },
    openCreate(){

    }
  }
};
</script>
<style lang="scss">
.board {
  width: 1000px;
  margin-left: 20px;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  align-items: flex-start;
}
.kanban {
  &.todo {
    .board-column-header {
      background: #4A9FF9;
    }
  }
  &.working {
    .board-column-header {
      background: #f9944a;
    }
  }
  &.done {
    .board-column-header {
      background: #2ac06d;
    }
  }
}
</style>

